<!--
 * @Author: jlzm
 * @Date: 2020-06-23 17:06:08
 * @LastEditors: jlzm
 * @LastEditTime: 2020-07-01 15:11:08
 * @FilePath: \MPShop\components\goods\uniGoodsColBig.vue
--> 
<template>
	<view class="uni-goods-col">
		<view class="goods-item" @click="navToDetailPage()">
			<!-- 图片 begin -->
			<view class="image-box">
				<image
					class="goods-image"
					:src="baseFileUri + goods.imagePath"
					:lazy-load="true"
					mode="aspectFill"
				></image>
			</view>
			<!-- 图片 end -->

			<!-- 商品信息 begin -->
			<view class="goods-info">
				<!-- 商品标题 -->
				<view class="goods-title clamp2">{{ goods.goodsName }}</view>
				<!-- 商品简介信息 -->
				<view :style="themeStyles.adronmentColor" class="goods-type">
					<slot name="goodsType">
						{{ goodsTypeText }}
					</slot>
				</view>
				<!-- 商品价格或其它可操作元素 -->
				<view class="goods-meta">
					<slot name="metaLeft">
						<view class="goods-meta__left">
							<view
								:style="{ color: priceColor }"
								class="cut-price"
							>
								<view class="price">{{
									goodsPrice[0] || "0"
								}}</view>
								<view class="decimal">{{
									goodsPrice[1] || "00"
								}}</view>
							</view>

							<view v-if="latePrice" class="late-price">
								{{ latePrice }}
							</view>
						</view>
					</slot>

					<view class="goods-meta__right">
						<slot name="metaRight"></slot>
					</view>
				</view>
			</view>
			<!-- 商品信息 end -->
		</view>
	</view>
</template>

<script>
import uniIcon from "@/components/uniIcon/uniIcon";

export default {
	components: {
		uniIcon
	},
	props: {
		goods: {
			type: Object,
			default: function() {
				return {};
			}
		},

		// 跳转链接
		routeLink: {
			type: String,
			default: ""
		},

		// // 商品额外信息
		// additionalText: {
		//   type: String,
		//   default: ""
		// },

		// 商品额外信息
		goodsTypeText: {
			type: String,
			default: ""
		},

		// 当前价格提示
		priceFavorText: {
			type: String,
			default: ""
		},
		// 商品价格
		goodsPrice: {
			type: Array,
			default() {
				return [];
			}
		},

		// 之前的价格
		latePrice: {
			type: String,
			default: ""
		},

		// 当前价格提示
		priceColor: {
			type: String,
			default: "#333333"
		}
	},

	data() {
		return {};
	},

	created() {
		// console.log("this.goodsPrice", this.goodsPrice);
		// console.log("this.goods", this.goods);
		// if (!this.goods.priceStr) return;
		// this.price =
		//     (this.goodsPrice.length && this.goodsPrice) ||
		//     `${this.goods.priceStr}`.split(".");
	},

	methods: {
		// 跳转详情页
		navToDetailPage() {
			if (!this.routeLink) return;
			uni.navigateTo({
				url: this.routeLink
			});
		}
	}
};
</script>


<style lang="scss" scoped>
.uni-goods-col {
	background: $theme-panel-bg-color;
	padding: 20rpx;
	border-radius: 6rpx;
	box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(240, 240, 240, 1);
	overflow: hidden;

	.goods-item {
		display: flex;
		position: relative;
		height: 248rpx;

		.image-box {
			position: relative;
			background-color: $theme-img-bg-color-test;

			width: 248rpx;
			border-radius: 6rpx;
			overflow: hidden;
			height: 100%;

			.goods-image {
				width: 100%;
				height: 100%;
			}

			.goods-status {
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				bottom: 0;
				right: 0;
				left: 0;
				height: 60rpx;
				font-size: $theme-size-small-base;
				color: $theme-bg-text-color;
				border-radius: 0 0 6rpx 6rpx;
				background-color: rgba(51, 51, 51, 0.6);
			}
		}

		.goods-info {
			position: relative;
			flex: 1;
			width: 391rpx;
			height: 100%;
			margin-left: 20rpx;

			.goods-title {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				font-weight: 500;
				font-size: $theme-size-base;
				line-height: 40rpx;
				height: 80rpx;
			}

			.goods-type {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				font-size: $theme-size-small-base;
				color: $theme-color-ghost-base;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: block;
			}

			.goods-meta {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				//   margin-top: 24rpx;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;

				&__left {
					// display: flex;
					// flex-direction: row;
					// align-items: flex-end;
					// line-height: $theme-size-large-base;

					.cut-price {
						display: inline-block;

						font-weight: bold;
						//   display: flex;
						//   flex-direction: row;
						//   align-items: flex-end;
						// line-height: $theme-size-large-base;

						.price {
							display: inline-block;
							vertical-align: 0;
							font-size: 38rpx;
							&::before {
								content: "￥";
								font-size: $theme-size-base;
								display: inline-block;
								vertical-align: 0;
							}
						}

						.decimal {
							display: inline-block;
							vertical-align: 0;
							font-size: 34rpx;
							// line-height: 38rpx;
							&::before {
								content: ".";
								display: inline-block;
								vertical-align: 0;
							}
						}
					}

					.late-price {
						display: inline-block;

						margin-left: 8rpx;
						text-decoration: line-through;
						color: $theme-color-ghost-base;
						font-size: $theme-size-small-base;
						vertical-align: 2rpx;
						&::before {
							content: "￥";
							text-decoration: line-through;
						}
					}
				}

				&__right {
					position: absolute;
					bottom: 0;
					right: 0;
					font-size: $theme-size-small-base;
					color: $theme-color-ghost-base;
				}
			}
		}
	}
}
</style>